<template>
  <div class="allPage">
    <el-row :gutter="15">
      <el-col :span="6">
        <el-card class="box-card-top">
          <getSalesOrders></getSalesOrders>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card-top">
          <totalsalesOther></totalsalesOther>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card-top">
          <totalsalesOther2></totalsalesOther2>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card-top">
          <totalsalesOther3></totalsalesOther3>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="24">
        <el-card class="box-card-bottom">
          <div slot="header" class="cardClass_header">
            <h3>发病统计</h3>
            <div>
              <el-button
                size="mini"
                type="success"
                icon="el-icon-plus"
                @click="open('新增发病统计')"
                >新增</el-button
              >
            </div>
          </div>
          <el-table
            :data="tableData"
            stripe
            v-loading="loading"
            size="small"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="id"
              type="index"
              label="序号"
              align="center"
            ></el-table-column>
            <el-table-column prop="niudusiwang" width="200" label="牛犊死亡原因" align="center">
            </el-table-column>
            <el-table-column prop="yufangcuoshi" label="预防措施" show-overflow-tooltip align="left">
            </el-table-column>
            <el-table-column align="center" width="250px">
              <template slot="header" slot-scope="scope">
                <div style="display: flex">
                  <el-input
                    v-model="ruleForm.value"
                    size="mini"
                    placeholder="输入牛犊死亡原因搜索"
                  />
                  <el-button
                    type="primary"
                    @click="submitForm('ruleForm')"
                    size="mini"
                    icon="el-icon-search"
                    style="margin-left: 10px"
                    circle
                  ></el-button>
                  <el-button
                    @click="resetForm('ruleForm')"
                    size="mini"
                    icon="el-icon-refresh"
                    circle
                  ></el-button>
                </div>
              </template>
              <template slot-scope="scope">
                <el-button
                  type="warning"
                  size="mini"
                  icon="el-icon-edit"
                  @click="open('修改发病统计', scope.row)"
                  >修改</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  @click="del(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <addemployeeData ref="addemployeeDataref"></addemployeeData>
  </div>
</template>

<script>
import totalsalesOther from "@/components/dataSreening/salesData/totalsalesOther";
import totalsalesOther2 from "@/components/dataSreening/salesData/totalsalesOther2";
import totalsalesOther3 from "@/components/dataSreening/salesData/totalsalesOther3";
import getSalesOrders from "@/components/dataSreening/salesData/getSalesOrders";
import addemployeeData from '@/components/employee/addemployeeData';
import {
  queryempployeedate,
  deleteempployeedate,
} from "@/apis/dataSreening/empployeedate";
export default {
  name: "salesData",
  components: {
    totalsalesOther,
    getSalesOrders,
    totalsalesOther2,
    totalsalesOther3,
    addemployeeData
  },
  data() {
    return {
      loading: false,
      ruleForm: {
        key: "fabinglv",
        value: "",
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [ ],
    };
  },
  created() {
    this.search();
  },
  methods: {
    // 重置
    resetForm(formName) {
      let _this = this;
      this.ruleForm.value = "";
      this.search(_this.ruleForm);
      this.ruleForm.pageNum = 1; // 查询重置页数
    },
    // 新增/修改弹窗
    open(title, row) {
      this.$refs.addemployeeDataref.show(title, row);
    },
    // 搜索
    submitForm() {
      const _this = this;
      _this.ruleForm.pageNum = 1; // 查询重置页数
      _this.search(_this.ruleForm);
    },
    // 删除
    del(row) {
      const _this = this;
      _this
        .$confirm("确认删除？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          deleteempployeedate(row.id).then(function (res) {
            // console.log(res);
            if (res.code === 0) {
              _this.$message({
                type: "success",
                message: res.msg,
              });
              _this.search();
              _this.ruleForm.pageNum = 1; // 查询重置页数
            } else {
              _this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch(() => { });
    },
    // 搜索方法
    search() {
      const _this = this;
      _this.loading = true;
      queryempployeedate(_this.ruleForm).then((res) => {
        _this.tableData = res.data;
        _this.loading = false;
      });
    },
  },
};
</script>

<style scoped>
.box-card-top {
  height: 280px;
  margin-bottom: 15px;
}

.box-card-bottom {
  height: calc(100vh - 420px);
}

/deep/ .el-table th.el-table__cell > .cell {
  text-align: center;
}
</style>